import React, {Component} from 'react';
import {StyleSheet, View, Text, Button, TextInput} from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';

const KEY = 'save_key';
export default class AsyncStorageDemoPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showText: '',
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}> AsyncStorage 使用 </Text>
        <TextInput
          style={styles.input}
          onChangeText={text => {
            this.value = text;
          }}
        />
        <View style={styles.input_container}>
          <Text
            onPress={() => {
              this.doSave();
            }}>
            存储
          </Text>
          <Text
            onPress={() => {
              this.doRemove();
            }}>
            删除
          </Text>
          <Text
            onPress={() => {
              this.getData();
            }}>
            获取
          </Text>
        </View>

        <Text>{this.state.showText}</Text>
      </View>
    );
  }
  //保存数据
  async doSave() {
    //方法一
    AsyncStorage.setItem(KEY, this.value, error => {
      error && console.log(error.toString());
    });

    //方法二
    AsyncStorage.setItem(KEY, this.value).catch(error => {
      error && console.log(error.toString());
    });
    //方法三
    try {
      await AsyncStorage.setItem(KEY, this.value);
    } catch (error) {
      error && console.log(error.toString());
    }
  }
  //删除数据
  async doRemove() {
    //方法一
    AsyncStorage.removeItem(KEY, error => {
      error && console.log(error.toString());
    });

    //方法二
    AsyncStorage.removeItem(KEY).catch(error => {
      error && console.log(error.toString());
    });
    //方法三
    try {
      await AsyncStorage.removeItem(KEY);
    } catch (error) {
      error && console.log(error.toString());
    }
  }
  //获取数据
  async getData() {
    //方法一
    AsyncStorage.getItem(KEY, (error, value) => {
      this.setState({
        showText: value,
      });
      console.log(value);
      error && console.log(error.toString());
    });

    //方法二
    AsyncStorage.getItem(KEY)
      .then(value => {
        this.setState({
          showText: value,
        });
        console.log(value);
      })
      .catch(error => {
        error && console.log(error.toString());
      });
    //方法三
    try {
      const value = await AsyncStorage.getItem(KEY);
      this.setState({
        showText: value,
      });
      console.log(value);
    } catch (error) {
      error && console.log(error.toString());
    }
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'stretch',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  input: {
    height: 30,
    // width: 200,
    borderColor: 'black',
    borderWidth: 1,
    margin: 10,
  },
  input_container: {
    height: 50,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: 10,
    margin: 10,
    backgroundColor: 'red',
  },
});
